一般來說前端技能來到第三課，就是要面對無所不在、生態系豐富、也象徵著永遠學不完的JavaScript了!比起HTML和CSS，利用JavaScript進行邏輯判斷、建立function、迴圈運算等方式，能讓網頁的應用更加多元，也可以操縱更複雜的動態與互動。

基本上利用HTML建立架構、CSS繪製外觀、JavaScript監控事件執行對應行為，是一個相當合理的安排。當然簡單的事件監控改變CSS狀態或是不具有邏輯判斷的animation，使用CSS撰寫即可囉~

使用JavaScript監測DOM事件：

第一步、指定網頁元件
原生JavaScript中指定網頁元件可以使用Id: getElementById，或是Class: getElementsByClassName

//使用Id指定
document.getElementById('my-div');
//使用Class指定
document.getElementsByClassName('my-div')[0];

可以把網頁元件指定至一個變數，會更好閱讀

//使用Id指定
let item=document.getElementById('my-div');
//使用Class指定
let item=document.getElementsByClassName('my-div')[0];

第二步、安排監聽事件
指定到對的網頁元件後，接下來可以使用 addEventListener()來進行事件的監聽：

item.addEventListener('click',function(){
    item.style.cssText = 'animation :my-animation-bg 4s both;'})

addEventListener傳入參數中，第一個是事件的string物件，第二個可以放置function，讓第一個參數所定義監測事件發生時，執行這個function。

前往後續文章
JavaScript 第二篇：https://ithelp.ithome.com.tw/articles/10271889